<template>
  <div class="ai-page">
    <!-- 左侧菜单 -->
    <div class="left-sidebar">
      <div class="header">
        <div class="avatar-title">
          <img src="https://api.dicebear.com/7.x/bottts/svg?seed=interview" class="small-avatar" />
          <h3>面试陪练官</h3>
        </div>
      </div>
      <div class="chat-history">
        <a-menu mode="inline">
          <a-menu-item key="home" @click="$router.push('/')">
            <home-outlined />
            回到首页
          </a-menu-item>
          <a-menu-item key="group" @click="$router.push('/group')">
            <team-outlined />
            交流群
          </a-menu-item>
          <a-menu-item key="feedback" @click="handleFeedback">
            <message-outlined />
            意见反馈
          </a-menu-item>
        </a-menu>
      </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="main-content">
      <div class="welcome-message">
        <div class="message-box">
          <div class="message-content">
            <div class="message-text">
              您好~
              <br />我是你的专属面试陪练官清清！请选择一个专项开始面试
            </div>
            <!-- <img src="@/assets/interviewImage.svg" class="ai-assistant" /> -->
          </div>
        </div>
      </div>

      <!-- 训练类型选择区域 -->
      <div class="training-sections">
        <div class="section-group">
          <h4>通用面试专项</h4>
          <div class="cards-container">
            <div class="training-card" @click="startTraining('self-intro')">
              <div class="card-icon blue">
                <user-outlined />
              </div>
              <div class="card-content">
                <div class="title">自我介绍 →</div>
                <div class="desc">帮你完善自我介绍和自我定位</div>
              </div>
            </div>

            <div class="training-card" @click="startTraining('resume')">
              <div class="card-icon green">
                <file-text-outlined />
              </div>
              <div class="card-content">
                <div class="title">履历介绍 →</div>
                <div class="desc">教你如何介绍自己的履历，让面试官眼前一亮</div>
              </div>
            </div>

            <div class="training-card" @click="startTraining('salary')">
              <div class="card-icon orange">
                <fire-outlined />
              </div>
              <div class="card-content">
                <div class="title">薪资谈判 →</div>
                <div class="desc">数据说服技巧，助你掌握谈薪技巧</div>
              </div>
            </div>
          </div>
        </div>

        <div class="section-group">
          <h4>技术面试专项</h4>
          <div class="cards-container">
            <div class="training-card" @click="startTraining('basic')">
              <div class="card-icon blue">
                <rocket-outlined />
              </div>
              <div class="card-content">
                <div class="title">基础篇 →</div>
                <div class="desc">教你用最企业思维进行对策规划回答</div>
              </div>
            </div>

            <div class="training-card" @click="startTraining('scenario')">
              <div class="card-icon green">
                <solution-outlined />
              </div>
              <div class="card-content">
                <div class="title">情景题 →</div>
                <div class="desc">深入分解，助你全面思考面试技巧</div>
              </div>
            </div>

            <div class="training-card" @click="startTraining('project')">
              <div class="card-icon purple">
                <bar-chart-outlined />
              </div>
              <div class="card-content">
                <div class="title">项目专项 →</div>
                <div class="desc">教你理解面试官的考察意图，掌握项目分析技巧</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  PlusOutlined, 
  MessageOutlined,
  UserOutlined,
  FileTextOutlined,
  FireOutlined,
  RocketOutlined,
  SolutionOutlined,
  BarChartOutlined,
  HomeOutlined,
  TeamOutlined
} from '@ant-design/icons-vue/es'

export default {
  name: 'AI',
  components: {
    PlusOutlined,
    MessageOutlined,
    UserOutlined,
    FileTextOutlined,
    FireOutlined,
    RocketOutlined,
    SolutionOutlined,
    BarChartOutlined,
    HomeOutlined,
    TeamOutlined
  },
  data() {
    return {
      selectedKeys: ['self-intro']
    }
  },
  methods: {
    startTraining(type) {
      this.selectedKeys = [type]
      const ws = this.$store.state.webSocket
      if (!ws || ws.readyState !== WebSocket.OPEN) {
        this.$message.error('连接已断开,请刷新页面重试')
        return
      }
      this.$router.push(`/ai/chat/${type}`)
    },
    handleFeedback() {
      this.$router.push('/feedback')
    }
  }
}
</script>

<style scoped>
.ai-page {
  display: flex;
  height: 100vh;
  background: #f5f7fa;
}

.left-sidebar {
  width: 260px;
  background: white;
  border-right: 1px solid #eef0f6;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.avatar-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.small-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: all 0.3s ease;
}

.small-avatar:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* 添加一个光晕效果 */
.small-avatar::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #4080ff22, #00b57822);
  z-index: -1;
}

.header {
  padding: 16px 0;
  border-bottom: 1px solid #eef0f6;
}

.new-chat-btn {
  margin: 16px 0;
  background: #eef4ff;
  border: none;
  color: #4080ff;
}

.new-chat-btn:hover {
  background: #e0ebff;
  color: #4080ff;
}

.main-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.welcome-message {
  margin-bottom: 32px;
}

.message-box {
  background: linear-gradient(to right, #eef4ff, #f7f9ff);
  padding: 20px;
  border-radius: 12px;
  max-width: 90%;
}

.message-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-text {
  font-size: 16px;
  line-height: 1.6;
  color: #1f2329;
}

.ai-assistant {
  width: 80px;
  height: 80px;
  margin-left: 20px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
  transition: all 0.3s ease;
}

.ai-assistant:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

.section-group {
  margin-bottom: 24px;
}

.section-group h4 {
  margin-bottom: 16px;
  font-size: 16px;
  color: #1f2329;
  font-weight: 500;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.training-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #eef0f6;
}

.training-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.card-icon :deep(svg) {
  font-size: 20px;
  color: white;
}

.blue {
  background: linear-gradient(135deg, #4080ff, #3569e7);
}

.green {
  background: linear-gradient(135deg, #00b578, #00a870);
}

.orange {
  background: linear-gradient(135deg, #ff7d00, #ed7107);
}

.purple {
  background: linear-gradient(135deg, #722ed1, #531dab);
}

.card-content {
  flex: 1;
}

.card-content .title {
  font-size: 15px;
  color: #1f2329;
  margin-bottom: 4px;
  font-weight: 500;
}

.card-content .desc {
  font-size: 13px;
  color: #86909c;
}

.chat-history {
  display: flex;
  flex-direction: column;
  flex: 1;
}

:deep(.ant-menu) {
  flex: 1;
  border-right: none;
}

:deep(.ant-menu-item) {
  margin: 4px 0 !important;
  padding: 12px 16px !important;
  height: auto !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  cursor: pointer;
}

:deep(.ant-menu-item .anticon) {
  font-size: 16px;
}

:deep(.ant-menu-item:hover) {
  color: #4080ff !important;
  background-color: #eef4ff !important;
}

:deep(.ant-menu-item-selected) {
  background-color: #eef4ff !important;
  color: #4080ff !important;
  font-weight: 500;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .ai-page {
    flex-direction: column;
  }

  .left-sidebar {
    width: 100%;
    height: auto;
    min-height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }

  .header {
    padding: 12px;
  }

  .avatar-title {
    justify-content: center;
  }

  .chat-history {
    display: flex;
    overflow-x: auto;
    padding: 0 12px;

    :deep(.ant-menu) {
      display: flex;
      width: 100%;
      border: none;
    }

    :deep(.ant-menu-item) {
      margin: 0 8px !important;
      padding: 8px 16px !important;
    }
  }

  .main-content {
    padding: 16px;
  }

  .welcome-message {
    margin-bottom: 24px;
  }

  .message-box {
    padding: 16px;
  }

  .training-sections {
    padding: 0;
  }

  .section-group {
    margin-bottom: 24px;
  }

  .cards-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .training-card {
    padding: 16px;
  }

  .card-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .card-content {
    .title {
      font-size: 16px;
    }

    .desc {
      font-size: 14px;
    }
  }
}
</style> 